<template>
  <div class="app-container">
    <h2>表格</h2>
    <div>
      <h3>一、基础用法</h3>
      <WTable :table-data="tableData">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="job" label="职业" />
      </WTable>
    </div>
    <div>
      <h3>二、加属性</h3>
      <p>table：selection | index | border</p>
      <p>table-column：show-overflow-tooltip</p>
      <button @click="getList">更新表格</button>
      <WTable
        :table-data="tableData1"
        selection
        index
        border
        :page="page"
        :total="total"
        :loading="tableLoading"
        @getList="getList"
      >
        <el-table-column prop="name" label="姓名" show-overflow-tooltip />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="job" label="职业" show-overflow-tooltip />
      </WTable>
    </div>
  </div>
</template>

<script>
import WTable from '@/components/WComponents/WTable/index.vue'

export default {
  name: 'testWTable',
  components: { WTable },
  data() {
    return {
      aaa: '',
      tableData: [
        { name: '张三', age: 18, job: '工作1' },
        { name: '李四', age: 32, job: '工作2' },
        { name: '张三', age: 18, job: '工作3' }
      ],
      page: {
        pageNo: 1,
        pageSize: 10
      },
      tableData1: [
        { name: '张三', age: 18, job: '工作1' },
        { name: '李四', age: 32, job: '工作2' },
        { name: '张三'.repeat(20), age: 18, job: '工作3'.repeat(10) }
      ],
      total: 3,
      tableLoading: false
    }
  },
  methods: {
    getList() {
      this.tableLoading = true
      setTimeout(() => {
        this.tableData1 = [...this.tableData1, this.tableData1[0]]
        this.total = this.tableData1.length

        this.tableLoading = false
      }, 300)
    }
  }
}
</script>

<style scoped lang="scss"></style>
